<template>
    <!-- Echarts容器 -->
   <div class="charts" ref="myecharvisit">
   </div>
</template>

<script>
import * as  echarts from 'echarts'

export default {
   name:'lineChartVisit',
   methods:{
       getEchart(){
            const myChartVisit = echarts.init(this.$refs.myecharvisit) 
            let  option = {
                grid:{ 
                    top:68,
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                    },
                // 图表的标题
                title: {
                    //主标题的设置
                    text: '年度访问量趋势',
                    subtext:'单位/人次',
                    //主标题的颜色
                    textStyle: {
                        color: '#303133',
                        fontSize:'18'
                    },
                    left: "left",
                },
               //提示组件
               tooltip: {},
               xAxis: {
                   type: 'category',
                },
               yAxis: {
                    type: 'value'
                },
               //  设置数据集
               dataset:{
                   source:[
                         ['月份','2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07','2022-08', '2022-09', '2022-10', '2022-11', '2022-12'],
                         ['访问量',8000, 7324, 7589, 6655, 19111, 8990, 8088,9022, 11344, 21889, 12655, 22411]
                   ]
               },
                 // 系列的设置：绘制什么类型的图表、数据的展示在这里设置
                series: [
                    {
                        type: 'line',
                        seriesLayoutBy: 'row'
                    }
                ]
            };
            myChartVisit.setOption(option);
            window.addEventListener("resize", () => {//监听浏览器窗口大小
                if(myChartVisit){
                    myChartVisit.resize();
                }
            });
        }
   },
   mounted(){
       this.getEchart()
   }
}
</script>

<style scoped>
    .charts{
       margin-top: 10px;
       width: 100%;
       height:320px;
   }
</style>